<template>
	<view class="">
		<u-popup mode="bottom" :show="show" round="16" :closeable="true" @close="show = false">
			<view class="comment-box">
				<view class="comment-title">评论 {{list.length}}</view>
				<scroll-view class="scroll-view" :scroll-y="true" @scrolltolower="scrolltolower">
					<view class="scroll-box">
						<view class="scroll-list" v-for="(item, index) in list" :key="item.id">
						<!-- 	<view class="list-left">
	
								<image class="list-left-image" v-if="item.userPhoto" :src="item.userPhoto" />
								<image class="list-left-image" v-else :src="$staticPath('default-headerImg.png')" />
							</view> -->
					
							<view class="list-right">
								
								<view class="flex" style="display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: row;">
									
									<image class="list-left-image" v-if="item.userPhoto" :src="item.userPhoto" />
									<image class="list-left-image" v-else src="https://main.pro.yanchaochao.com/mp-static/default-headerImg.png" />
									<text class="list-title">
								     	{{item.userNickname}}
									</text>
									
								</view>
							  
							  <view style="margin:-45rpx 0 0 100rpx;">
								  
								  <text class="list-center">{{item.commentContent}}</text>
								  <view class="list-time-box">
								  	<text class="list-time">{{item.commentTime}}</text>
								  	<view class="list-btn">
								  		<!-- <view class="list-btn-flex" @tap="givelikeComment(index,null,item,'parent')">
								  			<image class="list-btn-flex-image"
								  				:src="item.likeStatus? 'video/video-dianzhan-check.png' : 'video/video-dianzhan.png'" />
								  			<text class="list-btn-flex-text">{{item.likeNum}}</text>
								  		</view>
								  		<view class="list-btn-flex" @tap="commentText(index,null,item,'parent')">
								  			<image class="list-btn-flex-image" src="video/video-huifu.png" />
								  			<text class="list-btn-flex-text">{{item.commentNum}}</text>
								  		</view> -->
								  	</view>
								  </view>
								  <template v-if="item.childs&&item.childs.length>0">
								  	<view class="scroll-list" style="display: flex" v-for="(items, indexs) in item.childs" :key="items.id">
								  		<!-- <view class="list-left">
								  			<image class="list-left-image" :src="items.userPhoto" />
								  		</view> -->
								  		<view class="list-right">
											
											<view class="flex" style="display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: row;">
												
												<image class="list-left-image" v-if="items.userPhoto" :src="items.userPhoto" />
												<image class="list-left-image" v-else src="https://main.pro.yanchaochao.com/mp-static/default-headerImg.png" />
												<view class="list-title">{{items.userNickname}}</view>
												
											</view>
								  			
											
											<view style="margin:-45rpx 0 0 100rpx;">
												<view class="list-center">{{items.commentContent}}</view>
												<view class="list-time-box">
								  				<view class="list-time">{{items.commentTime}}</view>
								  				<view class="list-btn">
								  					<view class="list-btn-flex"
								  						@tap="givelikeComment(index,indexs,items,'child')">
								  						<image class="list-btn-flex-image"
								  							:src="items.likeStatus?'video/video-dianzhan-check.png':'video/video-dianzhan.png'" />
								  						<text class="list-btn-flex-text">{{items.likeNum}}</text>
								  					</view>
								  					<view class="list-btn-flex"
								  						@tap="commentText(index,indexs,items,'child')">
								  						<image class="list-btn-flex-image"
								  							src="/static/mp-static/video/video-huifu.png" />
								  						<text class="list-btn-flex-text">{{items.commentNum}}</text>
								  					</view>
								  				</view>
								  			</view>
								  		  </view>
										</view>
								  	</view>
								  </template>
								  <view class="view-more" @tap="toComment(item,index)" v-if="item.commentNum>0">
								  	{{item.twoShowLoad?'查看更多':'没有更多了'}}
								  </view>
							  </view>
							</view>
						</view>
						<view class="no-comment-box" v-if="list.length==0">
							<image class="no-comment-image" src="/static/app-plus/default_img.png"></image>
							<text class="no-comment-text">暂无评论</text>
						</view>
						<!-- <load-more :showLoad="showLoad" v-if="list.length>0"></load-more> -->
					</view>
				</scroll-view>
				<view class="input-box">
					<view class="input-flex">
						<input class="input-flex-input" type="text" :focus="isFocus" v-model="commentContent"
							placeholder="输入评论" placeholder-class="place" />
					</view>
					<view class="input-btn"><text class="input-btn-text" @tap="sumbit">发送</text></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			list: Array,
			showLoad: {
				type: Boolean,
				default: false
			},
			// twoShowLoad:{
			// 	type:Boolean,
			// 	default:false
			// }
		},
		data() {
			return {
				show: false,
				isCheck: false,
				commentContent: '',
				commentData: {
					data: {},
					parentIndex: 0,
					type: '',
					childIndex: 0
				},
				commentTest: '',
				isFocus: false
			};
		},
		watch: {
			show(v) {
				if (v) {
					this.commentContent = ''
					this.commentData = {}
				}
			}
		},
		mounted() {

		},
		methods: {
			timeFroms(value) {
				if (value) {
					return uni.$u.timeFrom(new Date(value).getTime()).replace(/刚刚/, this.$t('discuss.刚刚')).replace(/分钟前/,
						this.$t('discuss.分钟前')).replace(/小时前/, this.$t('discuss.小时前')).replace(/天前/, this.$t(
						'discuss.天前'));
				}
				return ''
			},
			scrolltolower() {
				this.$emit("scrolltolower")
			},
			toComment(item, index) {
				this.$emit("selectComment", item, index)
			},
			/**
			 * @param {Object} index 父级下标
			 * @param {Object} indexs 子级下标
			 * @param {Object} items 点赞数据
			 * @param {Object} type 点赞类型
			 */
			commentText(index, indexs, items, type) {
				// this.commentContent=''
				this.commentData.data = items;
				this.commentData.parentIndex = index;
				this.commentData.type = type;
				this.commentData.childIndex = indexs;
				this.isFocus = false;
				if (this.commentData.type == 'parent') {
					this.commentContent = ''
				} else if (this.commentData.type == 'child') {
					this.commentTest = '回复:' + this.commentData.data.userNickname + ' '
					this.commentContent = this.commentTest
				}
				console.log(this.commentData.data);
				setTimeout(() => {
					this.isFocus = true;
				}, 200)
			},
			//发布
			sumbit() {
				if (!this.commentContent || this.commentContent == this.commentTest) {
					uni.showToast({
						title: '请输入评论~',
						icon: 'none',
						duration: 1400,
						position: 'bottom'
					})
					return
				}
				let datas = {}
				if (this.commentData.type == 'child' || this.commentData.type == 'parent') {
					datas.parentIndex = this.commentData.parentIndex
					datas.type = this.commentData.type
					datas.childIndex = this.commentData.childIndex
					datas.commentContent = this.commentContent
					datas.pid = this.commentData.data.id
				} else {
					// datas.pid='0'
					datas.commentContent = this.commentContent;
					datas.parentIndex = 0;
					datas.type = 'father'
				}
				console.log(datas);
				this.$emit("sumbitVideo", datas)
				this.commentContent = ''
				this.commentData = {}
			},
			//点赞
			/**
			 * @param {Object} index 父级下标
			 * @param {Object} indexs 子级下标
			 * @param {Object} items 点赞数据
			 * @param {Object} type 点赞类型
			 */
			givelikeComment(index, indexs, items, type) {
				let datas = {
					data: items,
					parentIndex: index,
					type: type,
					childIndex: indexs
				}
				this.$emit("givelikeComment", datas)
			},
		},
		created() {}
	};
</script>

<style scoped>
	.comment-box {
		width: 750rpx;
		min-height: 60vh;
	}

	.comment-title {
		font-size: 34rpx;
		text-align: center;
		font-weight: 600;
		color: #333333;
		padding: 32rpx 0;
		padding-left: 32rpx;
		display: flex;
		flex-direction: column;
		
	}

	.scroll-view {
		height: 700rpx;
	}

	.scroll-box {
		padding: 0 32rpx;
	}

	.view-more {
		width: 248rpx;
		height: 64rpx;
		background: #F3F3F5;
		border-radius: 32rpx;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 64rpx;
		margin-left: 84rpx;
	}

	.scroll-list {
        display: flex;
		margin-bottom: 20rpx;
		/* padding: 20rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap; */
	}

	.list-left {
		width: 64rpx;
        display: flex;
        flex: 0 0 64rpx;
	}

	.list-left-image {
		display: inline-block;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}


	.list-right {
		display: inline-block;
		/* padding-left: 30rpx; */
	}

	.list-title {
		margin-left: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
	}

	.list-center {
		padding-top: 16rpx;
		font-size: 28rpx;
		color: #333333;
		display: inline-block;
		word-wrap: break-word!important;
		word-break: break-all!important;
		white-space: pre-wrap!important;
        /* word-break: break-all; */
	}

	.list-time-box {
		padding-top: 14rpx;
		/* display: flex; */
		/* flex-direction: row; */
        margin-bottom: 30rpx;
	}

	.list-time {
		flex: 1;
		font-size: 24rpx;
		color: #999999;
	}

	.list-btn {
		flex: 1;
		display: flex;
		flex-direction: row;
	}

	.list-btn-flex {
		text-align: center;
	}

	.list-btn-flex-image {
		width: 40rpx;
		height: 40rpx;
		display: block;
	}

	.list-btn-flex-text {
		text-align: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}


	.input-box {
		border-top: 2rpx solid #eeeeee;
		padding: 16rpx 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.input-flex {
		width: 598rpx;
		height: 80rpx;
		background: #f3f3f5;
		border-radius: 40rpx;
		padding: 18rpx 32rpx;
		box-sizing: border-box;
	}

	.input-flex-input {
		color: #333333;
		font-size: 32rpx;
	}

	.input-btn {
		flex: 1;
		text-align: right;
	}

	.input-btn-text {
		font-size: 34rpx;
		font-weight: 600;
		color: #ff0000;
		margin-left: 10rpx;
	}

	.no-comment-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 140rpx;
	}

	.no-comment-image {
		width: 440rpx;
		height: 310rpx;
	}

	.no-comment-text {
		color: #767676;
		font-size: 28rpx;
	}
</style>